import React from "react";
import ReactDOM from "react-dom/client";

// 引入样式
import "./index.css";

class App extends React.PureComponent {
  listRef = React.createRef();

  state = {
    counter: 0,
    list: [],
  };

  add = () => {
    const newMsg = `Hello ${this.state.list.length + 1}`;
    this.setState({
      list: [newMsg, ...this.state.list],
    });
  };

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate", this.listRef.current.scrollHeight);
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", this.listRef.current.scrollHeight);
  }

  render() {
    return (
      <div>
        <div className="list" ref={this.listRef}>
          {this.state.list.map((item, index) => {
            return (
              <div key={index} className="item">
                {item}
              </div>
            );
          })}
        </div>
        <button onClick={this.add}>添加一项</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.querySelector("#root")).render(<App />);
